<template >
  <el-dialog
    class="dialogSt"
    v-model="state.visible"
    title="巡检历史记录"
    width="800"
    style="padding: 0; border-radius: 12px"
    @opened="opened"
  >
    <div class="diaTop">
      <div class="tit">{{ state.info.inspectDate }}巡查</div>
      <div class="bot">
        <div class="bot_left">
          {{ state.info.startTime }}开始巡查 —
          {{ state.info.finishTime }}结束巡查 ｜ 巡查时长
          {{ state.info.duration }} 分钟
        </div>
        <div>
          <span class="">巡查日期</span>
          <el-date-picker
            v-model="state.curdate"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            style="width: 160px"
            type="date"
            placeholder="请选择日期"
            @change="dataChange"
          />
        </div>
      </div>
    </div>
    <div class="diaBot">
      <div class="itemSty" v-for="(item, index) in state.list" :key="index">
        <div class="itemBt">{{ item.deviceName }}</div>
        <div class="wtmsSty">
          <div class="wtbzSty">
            <img
              v-if="item.source == '智能上报'"
              src="/images/znsb.png"
              alt=""
            />
            <img v-else src="/images/rgsb.png" alt="" />
            <div
              style="
                position: absolute;
                top: 3px;
                left: 12px;
                font-size: 12px;
                color: #fff;
              "
            >
              {{ item.source }}
            </div>
          </div>

          <div
            :style="{
              display: 'flex',
              'align-items': 'center',
            }"
          >
            <div class="itemTit">{{ item.eventType }}</div>
            <div style="width: 160px; margin-left: 30px">
              {{ item.reportTime }}
            </div>
            <div
              :style="{
                'text-align': 'center',
                color:
                  item.eventClass == '非常紧急'
                    ? '#FF7575'
                    : item.eventClass == '紧急'
                    ? '#FFBD00'
                    : '#6E8DFB',
                'font-size': '12px',
                width: '80px',
              }"
            >
              {{ item.eventClass }}
            </div>
            <div style="width: 200px; margin-left: 20px">
              {{ item.desc }}
            </div>
            <div
              style="
                width: 98px;
                height: 56px;
                background-color: #666;
                border-radius: 10px;
                margin-left: 20px;
              "
            >
              <img
                :src="item.picUrl"
                style="width: 100%; height: 100%; border-radius: 10px"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <template #footer> </template> -->
  </el-dialog>
</template>

<script setup>
import { bytaskid } from "@/api/videoplan";
const props = defineProps({
  show: Boolean,
  item: Object,
});
const state = reactive({
  visible: false,
  info: {},
  list: [],
  curdate: "",
});
watch(
  () => props.show,
  (newValue) => {
    state.visible = newValue;
  }
);
const getData = async () => {
  let data = { taskId: props.item.taskId };
  if (state.curdate != "") {
    data.inspectDate = state.curdate;
  }
  let res = await bytaskid(data);
  state.info = res.data.inspectInfo || {};
  state.list = [...(res.data.hisEvents || [])];
  // useApi.post("/api/inspect/staff/gethisrecord/bytaskid", data).then((res) => {
  //   state.info = res.data.inspectInfo || {};
  //   state.list = [...(res.data.hisEvents || [])];
  // });
};
const dataChange = () => {
  getData();
};
const opened = () => {
  getData();
};
</script>

<style lang="scss">
.dialogSt {
  font-family: PingFangSC, PingFang SC;
  .diaTop {
    padding-bottom: 12px;
    border-bottom: 1px solid #ccddf7;

    .tit {
      font-weight: 600;
      font-size: 16px;
      color: #293555;
      line-height: 22px;
      text-align: left;
    }
    .bot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .bot_left {
        font-weight: 400;
        font-size: 14px;
        color: #58627b;
        line-height: 20px;
        text-align: left;
      }
      span {
        font-weight: 500;
        font-size: 14px;
        color: #293555;
        line-height: 18px;
        text-align: left;
        margin-right: 10px;
      }
    }
  }
  .diaBot {
    .itemSty {
      margin-top: 14px;
      .itemBt {
        font-weight: 600;
        font-size: 14px;
        color: #293555;
        line-height: 20px;
        text-align: left;
      }
      .wtmsSty {
        margin-top: 16px;
        background-color: #fff;
        border-radius: 12px;
        position: relative;
        padding: 10px 30px;
        .wtbzSty {
          position: absolute;
          top: -6px;
          left: 20px;
        }
        .itemTit {
          width: 60px;
          font-weight: 600;
          font-size: 14px;
          color: #293555;
          line-height: 20px;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }
}
// :deep(.el-dialog__header) {
//   background: #6e8dfb;
//   padding: 14px 20px;
//   border-top-left-radius: 12px;
//   border-top-right-radius: 12px;
// }
// :deep(.el-dialog__title) {
//   color: #fff;
// }
// :deep(.el-dialog__headerbtn) {
//   font-size: 24px;
//   margin-top: 2px;
// }
// :deep(.el-dialog__headerbtn .el-dialog__close) {
//   color: #fff;
// }
// :deep(.el-dialog__body) {
//   padding: 16px 30px;
//   background: linear-gradient(134deg, #e9effb 0%, #fbfcff 100%);
// }
</style>




<style lang="scss">
.dialogSt {
  font-family: PingFangSC, PingFang SC;
  .el-dialog__header {
    background: #2263bf !important;
    padding: 14px 20px !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
  }
  .el-dialog__title {
    color: #fff !important;
  }
  .el-dialog__headerbtn {
    font-size: 24px !important;
    margin-top: 2px !important;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff !important;
  }
  .el-dialog__body {
    padding: 16px 30px !important;
  }
  .el-dialog__footer {
    padding: 30px 0 20px !important;
    border-top: 1px solid #ccddf7 !important;
    box-shadow: 0px 0px 0px 0px #ffffff !important;

    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
  }
  .el-form-item .asterisk-left {
    align-items: center;
  }
  .el-select__wrapper {
    height: 40px;
  }
  .el-form-item--default .el-form-item__label {
    height: 40px;
    line-height: 40px;
  }
  .el-form-item__label-wrap {
    margin-left: 0 !important;
  }
}
</style>